<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <%-- 页头 --%>
    <title>添加文章 - ReadJava教程</title>
    <%@include file="../common/head.jsp" %>
    <link rel="stylesheet" href="/resources/editor/css/editormd.min.css"/>

</head>
<body>
<div class="wrapper">
    <div class="content">
        <div class="container-fluid">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">发布文章</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>文章类型</label>
                                    <select class="form-control input-square articleTypeId">
                                        <c:forEach items="${articleCategoryList}" var="ac">
                                            <option value="${ac.acId}">${ac.acTitle}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>文章标题</label>
                                    <input type="text" class="form-control input-square articleTitle">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>文章图标</label>
                                    <input type="text" class="form-control input-square articleIcon">
                                </div>
                                <div class="form-group">
                                    <label>文章简介</label>
                                    <input type="text" class="form-control input-square articleIntroduce">
                                </div>
                            </div>
                        </div>
                        <div class="form-group text-center">
                            <button class="btn btn-success" id="addArticleBtn">发布文章</button>
                            <button class="btn btn-danger" onclick="window.location.href='/manage/article/category/list'">
                                返回控制台
                            </button>
                        </div>
                        <div class="form-group">
                            <div id="test-editormd">
                                <textarea style="display:none;" id="textContent" name="textContent">[TOC]</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/resources/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="/resources/editor/lib/marked.min.js"></script>
<script src="/resources/editor/lib/prettify.min.js"></script>
<script src="/resources/editor/lib/raphael.min.js"></script>
<script src="/resources/editor/lib/underscore.min.js"></script>
<script src="/resources/editor/lib/sequence-diagram.min.js"></script>
<script src="/resources/editor/lib/flowchart.min.js"></script>
<script src="/resources/editor/lib/jquery.flowchart.min.js"></script>
<script src="/resources/editor/editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", {
            height: 590,
            htmlDecode: "video",  // 你可以过滤标签解码
            syncScrolling: "single",
            path: "/resources/editor/lib/",
            saveHTMLToTextarea: true,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/ftp/upload",
            /*theme: (localStorage.theme) ? localStorage.theme : "dark",
            previewTheme: (localStorage.previewTheme) ? localStorage.previewTheme : "dark",
            editorTheme: (localStorage.editorTheme) ? localStorage.editorTheme : "pastel-on-dark",*/
        });

        // 发布文章
        $("#addArticleBtn").on("click", function () {
            var articleTypeId = $('.articleTypeId option:checked').val();
            var articleTitle = $(".articleTitle").val();
            var articleIcon = $(".articleIcon").val();
            var articleIntroduce = $(".articleIntroduce").val();
            var articleContent = testEditor.getMarkdown();
            if (articleTypeId != null && articleTypeId.length != 0) {
                if (articleTitle != null && articleTitle.length != 0) {
                    if (articleIcon != null && articleIcon.length != 0) {
                        if (articleIntroduce != null && articleIntroduce.length != 0) {
                            if (articleContent != null && articleContent.length != 0) {
                                $.ajax({
                                    type: "POST",
                                    url: "/manage/article/add",
                                    data: {
                                        articleTypeId: articleTypeId,
                                        articleTitle: articleTitle,
                                        articleIcon: articleIcon,
                                        articleIntroduce: articleIntroduce,
                                        articleContent: articleContent
                                    },
                                    dataType: "json",
                                    success: function (data) {
                                        if (data.status == 200) {
                                            alert(data.message);
                                            window.location.reload();
                                        }
                                    },
                                    error: function () {
                                        alert("Ajax 请求错误");
                                    }
                                });
                            } else {
                                alert("文章内容不能为空");
                            }
                        } else {
                            alert("文章简介不能为空");
                        }
                    } else {
                        alert("文章图标不能为空");
                    }
                } else {
                    alert("文章标题不能为空");
                }
            } else {
                alert("文章类型不能为空");
            }
        });
    });
</script>

</body>


</html>